<template>
	<div class="system-allocation-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-allocation-search mb15">
				<el-button size="default" type="primary" class="ml10" @click="startsubject"> 预览试卷 </el-button>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column type="index" label="序号" width="60" />
				<el-table-column prop="write_name" label="题目" show-overflow-tooltip></el-table-column>
				<el-table-column prop="scene" label="类型" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="dept_id" label="学院ID" show-overflow-tooltip> </el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="generate_exam(scope.row)"
							>生成试卷</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="state.tableData.param.pageNum"
				background
				v-model:page-size="state.tableData.param.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total"
			>
			</el-pagination>
		</el-card>
		<UserDialog ref="userDialogRef" @refresh="getTableData()" />
		<!-- 选中的题展示 -->
		<el-dialog v-model="dialogVisible" title="选中的题" width="60%" :before-close="handleClose">
			<el-table :data="selectSubject" style="width: 100%">
				<el-table-column type="index" label="序号" width="60" />

				<el-table-column prop="paper_name" label="试卷名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="dept_id" label="学院" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="write_id" label="题目id" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="is_open" label="是否开发" show-overflow-tooltip></el-table-column>
				<el-table-column prop="begin_time" label="开始时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="end_time" label="结束时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="teacher_id" label="选题人" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="createHttp('edit', scope.row)"
							>生成连接</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">重新选择</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemAllocation">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { val, value } from 'dom7';

// 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/system/allocation/dialog.vue'));

// 定义变量内容
const userDialogRef = ref();
const state = reactive<any>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 初始化表格数据
const getTableData = () => {
	state.tableData.loading = true;
	const data = [
		{ write_name: '题目1', scene: '类型1', id: 1, dept_id: '学院ID' },
		{ write_name: '题目2', scene: '类型2', id: 2, dept_id: '学院ID' },
		{ write_name: '题目3', scene: '类型3', id: 3, dept_id: '学院ID' },
	];
	state.tableData.data = data;
	state.tableData.total = state.tableData.data.length;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
// 页面加载时
onMounted(() => {
	getTableData();
});
// 预览试卷的弹窗
const dialogVisible = ref(false);
// 存储的试卷题
const selectSubject = ref([{ begin_time: '30', end_time: '60', id: 1 }]);
const selectId = ref('');
// 点击生成试卷
const generate_exam = (value: any) => {
	selectId.value = value.id;
};

// 弹出框预览试卷题
const startsubject = () => {
	dialogVisible.value = true;
	const data = selectSubject.value.filter((item) => item.id === selectId.value);
	console.log(data, 'data111111111');
	selectSubject.value = data;
};
</script>

<style scoped lang="scss">
.system-allocation-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}
</style>
